<template>
  <div class="wrapper">
    <header>
      <Back></Back>
      <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</p>
      <p>商家虚拟钱包</p>
      <p>&emsp;&emsp;&emsp;&emsp;</p>
    </header>
    <div class="wallet-box">
      <div class="wallet">
        <div class="balance-box">
          <h3>余额(元)</h3>
          <p>{{ business.balance }}</p>
        </div>
        <div class="rechargeAndWithdraw">
          <button class="recharge" @click="toRecharge">充值</button>
          <button class="withdraw" @click="toWithdraw">提现</button>
        </div>
      </div>
    </div>
    <div class="transaction-list">
      <h3>交易明细</h3>
      <table>
        <thead>
        <tr>
          <th>交易类型</th>
          <th>金额(元)</th>
          <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="transaction in transactions" :key="transaction.id">
          <td>{{ transaction.type === 'recharge' ? '充值' : '提现' }}</td>
          <td>{{ transaction.amount }}</td>
          <td>{{ transaction.time }}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <button class="create-wallet" @click="createWallet" v-if="!business.walletId">创建钱包</button>
  </div>
</template>
<script>
import Back from "@/components/Back.vue";

export default {
  name: 'BVirtualWallet',
  components: { Back },
  data() {
    return {
      business: {
        businessId: null,
        balance: '0', // 余额初始化为字符串 '0'，确保后端可以解析为 BigDecimal
        walletId: null
      },
      businessId: this.$route.query.businessId,
      transactions: [] // 用于存储交易明细
    };
  },
  created() {
    this.business.businessId = this.businessId;
    this.fetchWalletDetails();
  },
  methods: {
    fetchWalletDetails() {
      // 查询商家钱包信息，包括余额和交易明细
      let url = `BVirtualWallet/getBVirtualWalletByBusinessId/${this.business.businessId}`;
      this.$axios.get(url)
          .then(response => {
            if (response.data && response.data.result) {
              this.business.balance = response.data.result.balance.toString(); // 确保余额为字符串格式
              this.business.walletId = response.data.result.businessId;
              this.transactions = response.data.result.transactions || []; // 假设返回的明细在 transactions 字段
            } else {
              console.error('No wallet found for business');
            }
          })
          .catch(error => {
            console.error('Error fetching wallet details:', error);
          });
    },
    createWallet() {
      // 创建新钱包
      let url = `BVirtualWallet/BVirtualWallet/${this.business.businessId}`;
      this.$axios.post(url)
          .then(response => {
            if (response.data && response.data.result === 1) {
              console.log('Wallet created successfully');
              this.fetchWalletDetails(); // 刷新钱包信息
            } else {
              console.error('Wallet creation failed');
            }
          })
          .catch(error => {
            console.error('Error creating wallet:', error);
          });
    },
    toRecharge() {
      this.$router.push({ path: '/businessRecharge', query: { businessId: this.business.businessId } });
    },
    toWithdraw() {
      this.$router.push({ path: '/businessWithdraw', query: { businessId: this.business.businessId } });
    }
  }
};
</script>
<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* 头部 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #00abf5;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper header .left {
  flex: 3;
  margin-left: 8vw;
  font-size: 4.8vw;
}

.wrapper header .right {
  margin-right: 4vw;
  font-size: 2.5vw;
}

/* 钱包内容 */
.wrapper .wallet-box {
  width: 90%;
  margin: 12vw 4vw 0 4vw;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 2vw 4vw;
}

.wrapper .wallet-box .balance-box h3 {
  margin: 3vw 0 5vw 0;
  font-size: 4.5vw;
  font-weight: 400;
  color: #7f7f7f;
}

.wrapper .wallet-box .balance-box p {
  margin-bottom: 5vw;
  font-size: 8vw;
  font-weight: 600;
  color: #7f7f7f;
}

.wrapper .wallet-box .rechargeAndWithdraw {
  margin: 4vw 2vw;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
}

.wrapper .wallet-box .rechargeAndWithdraw .recharge {
  width: 45%;
  height: 10vw;
  border: none;
  outline: none;
  border-radius: 6px;
  font-size: 4.5vw;
  font-weight: 500;
  background-color: #00abf5;
  color: #fff;
  margin-right: 4vw;
}

.wrapper .wallet-box .rechargeAndWithdraw .withdraw {
  width: 45%;
  height: 10vw;
  border: none;
  outline: none;
  border-radius: 6px;
  font-size: 4.5vw;
  font-weight: 500;
  background-color: #00abf5;
  color: #fff;
  margin-left: 4vw;
}

/* 交易明细 */
.wrapper .transaction-list {
  width: 90%;
  margin: 4vw 4vw 0 4vw;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 2vw 4vw;
}

.wrapper .transaction-list h3 {
  margin: 3vw 0 5vw 0;
  font-size: 4.5vw;
  font-weight: 400;
  color: #7f7f7f;
}

.wrapper .transaction-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2vw;
}

.wrapper .transaction-list table thead th {
  padding: 1vw;
  text-align: left;
  font-size: 4vw;
  font-weight: 400;
  color: #7f7f7f;
  border-bottom: 1px solid #ccc;
}

.wrapper .transaction-list table tbody tr {
  padding: 1vw;
  text-align: left;
  font-size: 4vw;
  font-weight: 400;
  color: #7f7f7f;
}

.wrapper .transaction-list table tbody tr td {
  padding: 1vw;
  border-bottom: 1px solid #ccc;
}

/* 创建钱包按钮 */
.wrapper .create-wallet {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #00abf5;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.wrapper .create-wallet:hover {
  background-color: #007bff;
}
</style>